<template>
    <div class="fund-container">
        <!-- 日期选择 -->
        <van-popup v-model="dateTime.show" round position="bottom">
            <div class="fund-date-type" @click="handleTimeExchange">按日期选择<van-icon name="exchange" /></div>
            <div class="fund-date-time">
                <p :class="{ 'active': dateTime.startTime }" @click="handleRemoveStart">{{ dateTime.startTime || '开始日期' }}</p>
                <span>至</span>
                <p :class="{ 'active': dateTime.endTime }" @click="handleRemoveEnd">{{ dateTime.endTime || '结束日期' }}</p>
            </div>
            <van-datetime-picker
                class="fund-datetime"
                type="date"
                v-model="dateTime.currentDate"
                :show-toolbar="false"
                :min-date="dateTime.minDate"
            />
            <div class="fund-container-footer">
                <button class="fund-container-close" @click="handleDateCancel">取消</button>
                <button class="fund-container-confirm" solt="confirm" @click="handleDateConfirm">确定</button>
            </div>
        </van-popup>

        <!-- 月份选择 -->
        <van-popup v-model="month.show" round position="bottom">
            <div class="fund-month-type" @click="handleTimeExchange">按月选择<van-icon name="exchange" /></div>
            <p class="fund-month-time">{{ month.startTime || '选择月份' }}</p>
            <van-datetime-picker
                class="fund-month"
                type="year-month"
                v-model="month.currentDate"
                :show-toolbar="false"
            />
            <div class="fund-container-footer">
                <button class="fund-container-close" @click="handleMonthCancel">取消</button>
                <button class="fund-container-confirm" solt="confirm" @click="handleMonthConfirm">确定</button>
            </div>
        </van-popup>
    </div>
</template>

<script>
import moment from 'moment'

export default {
    data () {
        return {
            dateTime: {
                show: false,
                minDate: new Date(2011, 0, 1),
                currentDate: new Date(),
                startTime: '',
                endTime: ''
            },
            month: {
                show: false,
                currentDate: new Date()
            }
        }
    },
    methods: {
        /* 时间段 —— 确认按钮 */
        handleDateConfirm () {
            if (this.$U.isEmpty(this.dateTime.startTime)) {
                this.dateTime.startTime = moment(this.dateTime.currentDate).format('YYYY-MM-DD')
                this.dateTime.minDate = this.dateTime.currentDate
            } else {
                this.dateTime.endTime = moment(this.dateTime.currentDate).format('YYYY-MM-DD')
                this.$emit('confirm', 'dateTime', this.dateTime.startTime, this.dateTime.endTime)
                this.dateTime.show = false
            }
        },

        /* 时间段 —— 取消按钮 */
        handleDateCancel () {
            if (this.$U.isEmpty(this.dateTime.startTime)) {
                this.dateTime.show = false
            } else {
                this.dateTime.startTime = ''
                this.dateTime.endTime = ''
                this.dateTime.minDate = new Date(2011, 0, 1)
            }
        },

        /* 时间段 —— 确认按钮 */
        handleMonthConfirm () {
            this.$emit('confirm', 'month', this.month.currentDate, '')
            this.month.show = false
        },

        /* 时间段 —— 取消按钮 */
        handleMonthCancel () {
            this.month.show = false
        },

        /* 切换 —— 日期 & 月份 */
        handleTimeExchange () {
            if (this.dateTime.show) {
                this.dateTime.show = false
                this.month.show = true
            } else if (this.month.show) {
                this.month.show = false
                this.dateTime.show = true
            }
        },

        /* 清除时间 */
        handleRemoveStart () {
            this.dateTime.startTime = ''
            this.dateTime.endTime = ''
            this.dateTime.minDate = new Date(2011, 0, 1)
        },

        /* 清除时间 */
        handleRemoveEnd () {
            this.dateTime.endTime = ''
        }
    }
}
</script>

<style lang="less" scoped>
.fund-date-type {
    width: 105px;
    height: 28px;
    line-height: 28px;
    margin: 20px 22px 0;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: #2D3748;
    background-color: rgba(202,212,226,0.29);
    border-radius: 6px;
    box-sizing: border-box;
    text-align: center;
}
.fund-date-time {
    margin: 4px 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    p {
        width: 95px;
        height: 36px;
        line-height: 36px;
        margin: 0;
        padding: 0;
        font-size: 12px;
        font-weight: 400;
        color: rgba(45,55,72,.4);
        border-bottom: 1px solid rgba(45,55,72,.4);
        text-align: center;
    }
    p.active {
        color: #2D3748;
        border-bottom-color: #2D3748;
    }
    span {
        margin: 0 30px;
        font-size: 14px;
        font-weight: 400;
        color: #2D3748;
        text-align: center;
    }
}
.fund-month-type {
    width: 105px;
    height: 28px;
    line-height: 28px;
    margin: 20px 22px 0;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: #2D3748;
    background-color: rgba(202,212,226,0.29);
    border-radius: 6px;
    box-sizing: border-box;
    text-align: center;
}
.fund-month-time {
    width: 238px;
    height: 36px;
    line-height: 36px;
    margin: 4px auto 10px;
    padding: 0;
    font-size: 12px;
    font-weight: 400;
    color: rgba(45,55,72,.4);
    border-bottom: 1px solid rgba(45,55,72,.4);
    text-align: center;
}
.fund-container-footer {
    padding: 10px 54px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .fund-container-close {
        margin: 0;
        padding: 0;
        font-size: 14px;
        color: #2D3748;
        border: none;
        background: transparent;
    }
    .fund-container-confirm {
        width: 170px;
        height: 56px;
        line-height: 56px;
        margin: 0;
        padding: 0;
        font-size: 14px;
        color: #FFFFFF;
        border: none;
        border-radius: 20px;
        background: linear-gradient(136deg,#6BBFFC 6%, #00D5E3 90%);
    }
}
</style>
